<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script>
	/*	window.onload = function(){
			var smallImg=document.getElementById("smallImg")
			var smallMagnifying=document.getElementById("smallCursor")
			var bigImg=document.getElementById("bigImg")
			var bigMagnifying=document.getElementById("bigCursor")
			smallMagnifying.style.height=smallMagnifying.style.width=bigMagnifying.offsetWidth/bigImg.offsetWidth*smallImg.offsetWidth+"px"
			var scale=bigImg.offsetWidth/smallImg.offsetWidth
			smallImg.onmouseenter=function(){
				smallMagnifying.style.display="block"
				bigMagnifying.style.display="block"
			}
			smallImg.onmouseleave=function(){
				smallMagnifying.style.display="none"
				bigMagnifying.style.display="none"
			}
			smallImg.onmousemove=function(e){
				var e=e||event
				smallMagnifying.style.left=Math.min(smallImg.offsetWidth-smallMagnifying.offsetWidth,Math.max(0,e.clientX-smallImg.offsetLeft-smallMagnifying.offsetWidth/2))+"px"
				smallMagnifying.style.top=Math.min(smallImg.offsetHeight-smallMagnifying.offsetHeight,Math.max(0,e.clientY-smallImg.offsetTop-smallMagnifying.offsetHeight/2))+"px"
				bigImg.style.left=-smallMagnifying.offsetLeft*scale+"px"
				bigImg.style.top=-smallMagnifying.offsetTop*scale+"px"
			}
		}*/
		window.onload=function(){
			var smallImg=document.getElementById("smallImg")
			var smallMagnifying=document.getElementById("smallCursor")
			var bigImg=document.getElementById("bigImg")
			var bigMagnifying=document.getElementById("bigCursor")
			smallMagnifying.style.height=smallMagnifying.style.width=bigMagnifying.offsetWidth/bigImg.offsetWidth*smallImg.offsetWidth+"px"
			var scale=bigImg.offsetWidth/smallImg.offsetWidth
			smallImg.onmouseenter=function(){
				smallMagnifying.style.display="block"
				bigMagnifying.style.display="block"
			}
			smallImg.onmouseleave=function(){
				smallMagnifying.style.display="none"
				bigMagnifying.style.display="none"
			}
			smallImg.onmousemove=function(e){
				var e=e||event
				smallMagnifying.style.left=Math.min(smallImg.offsetWidth-smallMagnifying.offsetWidth,Math.max(0,e.clientX-smallImg.offsetLeft-smallMagnifying.offsetWidth/2))+"px"
				smallMagnifying.style.top=Math.min(smallImg.offsetHeight-smallMagnifying.offsetHeight,Math.max(0,e.clientY-smallImg.offsetTop-smallMagnifying.offsetHeight/2))+"px"
				bigImg.style.left=-smallMagnifying.offsetLeft*scale+"px"
				bigImg.style.top=-smallMagnifying.offsetTop*scale+"px"
			}
		}
	</script> 
	<body>
		<div id="smallImg" style="position: absolute; background:url(img/星际穿越.jpg) center; background-size: cover; top: 100px; left:100px; width:200px; height:200px;">
			<div id="smallCursor" style="position: absolute; left: 0; top: 0; display:none; width: 40px; height: 40px; background: rgba(200,198,255,0.8);"></div>
		</div>
		<div id="bigCursor" style="position: absolute; height:300px; width:300px; left: 350px; top: 10px; background: rgba(200,198,255,0.1); overflow: hidden;">
			<img id="bigImg" style="position: absolute; left: 0px; top: 0px;" src="img/星际穿越.jpg"/>
		</div>
	</body>

</html>